前幾天我們有說明 Virtual Dom 如何實作 ,

今天我們來介紹一個 反對 Virtual Dom 的工具 Svelte.js

內文

Svelte.js 也是一個 Compiler 工具的 Web Component 編譯器( 框架 )

所以開頭就是用 CLI 建立專案拉 ~~

利用 Svelte REPL 建立新專案

Svelte 的 CLI 改名很多次 Svelte REPL . Svelte CLI . SvelteKit 都是指 CLI 工具

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js

npm install
npm run dev

在設定檔中開啟 web component 的設定

在 rollup.config.js 檔中 加上 customElement: true

 plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
        ...
      }
      ...
    }),
    ...
  ]

使用 <svelte:options tag="[tag-name]" /> 來定義 web component

App.svelte

<svelte:options tag="what-ever" />

<script>
  // make sure component Foo is available, but we don't import
  // it... we'll use it with it's tag <my-foo /> (see bellow)
  import './Foo.svelte'
  export let name = 'World'
</script>

<p>Hello, {name}!</p>

<my-foo {name} />

<style>
 p { color: skyblue; }
</style>

Foo.svelte

<svelte:options tag="my-foo" />

<script>
  export let name
</script>

<p>I am {name}</p>

註解 App 的掛載

main.js

// 雖然 App 的沒被使用 , 但是需要將 import App.svelte , 
// svelte 才知道要將 App.svelte 內設定的 svelte:options 轉換成 web component
import App from './App.svelte';

/*
// 註解 new App 避免 svelte 的掛載行為 , 我們只需要 web component
const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});
 */

export default app;

成果

參考資料

• svelte.js 官方 docs
• svelteKit 官方 docs
• Svelte — 是什麼讓我遇見這樣的你
• How to Create a Web Component in Svelte
• Svelte Custom element API